<template>
    <div class="rx-vue-tree-box">
        <rx-vue-tree
            v-model="checked"
            class="tree-style"
            :tree-data="treeData"
            :async-tree="async"
            field="key"
            label="name"
            :show-checkbox="false"
            :show-edit="edit"
            @expandClick="triggerClick"
            v-model:expandedKeys="expandedKeys"
            @rowClick="handSelect"
            :tree-icon="treeIcon"
            :show-icon="true"
            :iconStyle="{fontSize:'11px'}"
            single="true"
            :checkStrictly="true"
            :fold-peer-node="false"
            :show-drag="false"
            :multiple="false"
            parentField="parentId"
        >
            <template #nodeExpand>
                <rx-icon-show icon="icon-fillFile-open" style="color: #ffdc53;"></rx-icon-show>
            </template>
            <template #nodeCollapse>
                <rx-icon-show icon="icon-fillFile1" style="color: #ffdc53;"></rx-icon-show>
            </template>
        </rx-vue-tree>
    </div>
</template>

<script>
import {RxVueTree} from "@lowcode/jpaas-base-lib";
import tree from './tree'

export default {
    name: "rx-category-treeeditor",
    mixins: [tree],
    props: {
        /**
         * 分类KEY
         */
        catKey: {
            type: String
        },
        /**
         * 权限KEY
         */
        readKey: {
            type: String,
            default: 'read'
        },
        /**
         * 是否管理员,默认管理
         */
        isAdmin: {
            type: Boolean,
            default: true
        },
        /**
         * 默认需要授权。
         */
        isGrant: {
            type: Boolean,
            default: true
        },
        /**
         *  异步属性，默认为true
         */
        async: {
            type: Boolean,
            default: true
        },
        /**
         * 是否允许编辑，默认为true。
         */
        edit: {
            type: Boolean,
            default: true
        },
        /**
         * 初始化的时候进行加载，默认为true
         */
        initOnLoad: {
            type: Boolean,
            default: true
        },
        treeRootList:{
          type: Array,
          default: ()=>{
            return []
          }
        },
        /**
         *  统计配置
         *  配置结构如下
         *  {
         *       //1.统计的表名
         *      //1.1.简单的表名，如：sys_app
         *      //1.2.带数据库前缀的表名，如果该表不是在jpaas_system库中，则需指定表所在的数据库，如：jpaas_bpm.bpm_def
         *      //1.3.多表关联，示例：jpaas_bpm.BPM_TASK t LEFT JOIN jpaas_bpm.bpm_def v ON t.def_id_ = v.def_id_
         *      //1.4.复杂sql，示例：(SELECT t.*, d.APP_ID_ FROM jpaas_bpm.BPM_TASK t
         *                              LEFT JOIN jpaas_bpm.bpm_def d ON t.def_id_ = d.def_id_
         *                              WHERE ASSIGNEE_ = #{w.curUserId} AND t.TENANT_ID_ = #{w.curTenantId} AND t.STATUS_ != 'COMPLETED'
         *                              AND t.STATUS_ != 'LOCKED' UNION SELECT t.*, d.APP_ID_
         *                              FROM jpaas_bpm.bpm_task t LEFT JOIN jpaas_bpm.bpm_def d ON t.def_id_ = d.def_id_
         *                              LEFT JOIN jpaas_bpm.bpm_task_user u ON t.TASK_ID_ = u.TASK_ID_
         *                              WHERE t.ASSIGNEE_ IS NULL AND t.STATUS_ != 'COMPLETED' AND t.STATUS_ != 'LOCKED'
         *                              AND (u.USER_ID_ = #{w.curUserId} AND t.TENANT_ID_ = #{w.curTenantId} OR u.GROUP_ID_ IN (#{w.curUserRoles}))
         *                            ) t
         *      table:"jpaas_form.FORM_PC",
         *      //2.统计的表的参数
         *      //2.1.这里配合带有参数的sql统计表使用
         *      //2.2.name 参数名
         *      //2.3.type:string/number/date 字符、数字、日期
         *      //2.4.dateFormat: 如type为date，必填，其它为空
         *      //2.5.value: 值
         *      //2.6.valueType 取值类型，该项可以不填，默认为specify
         *      //2.6.1.specify：指定类型，也就是value属性定义的值
         *      //2.6.2.context：上下文类型,目前能使用的有如下几种： 1.curUserId【当前用户id】,
         *      //         2.curTenantId【当前机构id】,3.curDate【当前时间】,4.curUserRoles【当前用户角色列表】
         *      //         这几个选项在vaule中填写
         *      //2.7.需特别注意，如果此次指定参数名，上面的table后面的参数必须以#{}进行占位，并且里面的参数要以固定的w.开头，如：#{w.curUserId}
         *      tableParams:[{name:"curUserId", type:"string", dateFormat:"", value:"curUserId", valueType:"context"},
         *                   {name:"curTenantId", type:"string", dateFormat:"",value:"curTenantId", valueType:"context"},
         *                   {name:"curUserRoles", type:"string", dateFormat:"",value:"curUserRoles", valueType:"context"},
         *                   ],
         *      //3.统计表的分类ID字段
         *      //3.1不加表别名前缀，如：CATEGORY_ID_
         *      //3.2加表别名前缀，如：t.CATEGORY_ID_
         *      field:"CATEGORY_ID_",
         *      //4.查询条件
         *      //4.1.其值为对象数组，有则填写，无则为[]
         *      //4.2.name 字段名
         *      //4.3.type:string/number/date 字符、数字、日期
         *      //4.4.dateFormat: 如type为date，必填，其它为空
         *      //4.5.op 操作: =,!=,like,in,>=、<=等
         *      //4.6.value: 指定的值
         *      //4.7.7.valueType 取值类型，该项可以不填，默认为specify
         *      //4.7.7.1 specify：指定类型，也就是value属性定义的值
         *      //4.7.7.2 context：上下文类型,目前能使用的有如下几种： 1.curUserId【当前用户id】,
         *      //         2.curTenantId【当前机构id】,3.curDate【当前时间】
         *      //         这几个选项需在3.6.vaule中填写
         *      whereConf:[{name:"IS_DIALOG_",type:"date",dateFormat:"yyyy-MM-dd HH:mm:ss",op:"=",value:"2020-01-02",valueType:"specify"}]
         *  }
         */
        statisticConfig: {
            type: Object,
            default: () => {
                return {}
            }
        },
        /**
         * 初始化的时候进行加载，默认为false
         */
        isBpmClient: {
            type: Boolean,
            default: false
        },
        /**
         * 初始化的时候进行加载，默认为false
         */
        isMyBpm: {
            type: Boolean,
            default: false
        },
        /**
         * 流程设计列表新增分类表示
         */
        isBpmDefList: {
            type: Boolean,
            default: false
        },
        /**
         * 分类删除时是否校验关联表有数据
         * 有数据不允许删除
         */
        checkToDel: {
            type: Boolean,
            default: false
        },
    },
    components: {
        RxVueTree
    },
    data() {
        return {
            isTreeCat: true,
            treeIcon: {
                expand: 'iconwenjianziliao',
                collapse: 'iconfile-folder-fill',
                leaf: 'iconfile-text-fill'
            }
        }
    },
    computed: {},
    created() {

    },
    methods: {

        handSelect(tree, parentData) {
            this.$emit("handSelect", tree);
        },
    }
}
</script>

<style scoped>
.tree-style >>> .rx-v-tree-trigger i {
    color: #666666;
}

.tree-style >>> .rx-icon-document i {
    color: #e3e3e3 !important;
}

.tree-style >>> .rx-icon-container i {
    color: #FFDC53FF;
    font-size: 16px;
}

.tree-style >>> .rx-v-tree-content-active i {
    color: #4285f4 !important;
}

.rx-vue-tree-box >>> .rx-expand-icon-box .rx-v-tree-icon {
    font-size: 13px !important;
    margin-left: 1px;
}

.rx-vue-tree-box >>> .rx-v-tree-icon {
    margin-top: 1px;
}

.rx-vue-tree-box >>> .rx-v-tree-icon-box {
    width: 16px;
}

.btn i {
    margin-right: 4px;
}
</style>
